<script setup>
import imgStaffPerson from '@/assets/image/index/staff-person.png'
import imgStaffSmart from '@/assets/image/index/staff-smart.png'
import imgCardPattern from '@/assets/image/index/bg-card-pattern.png'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

const personNum = computed(() => props.data.staffNum || 0)
const robotNum = computed(() => props.data.staffAINum || 0)
</script>

<template>
  <section class="staff-card">
    <div class="staff-card__item">
      <n-image
        class="staff-card__img"
        width="92%"
        :src="imgStaffPerson"
        preview-disabled
      />
      <div class="staff-card__bottom">
        <n-image
          class="staff-card__pattern"
          width="100%"
          :src="imgCardPattern"
          preview-disabled
        />
        <div class="staff-card__text">
          工作人员
          <span>
            <n-number-animation :from="0" :to="parseInt(personNum)" />
          </span>
          名
        </div>
      </div>
    </div>
    <div class="staff-card__item">
      <n-image
        class="staff-card__img"
        width="92%"
        :src="imgStaffSmart"
        preview-disabled
      />
      <div class="staff-card__bottom">
        <n-image
          class="staff-card__pattern"
          width="100%"
          :src="imgCardPattern"
          preview-disabled
        />
        <div class="staff-card__text">
          智能员工
          <span>
            <n-number-animation :from="0" :to="parseInt(robotNum)" />
          </span>
          名
        </div>
      </div>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.staff-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 38%;
  }

  &__img {
    justify-content: center;
  }

  &__bottom {
    position: relative;
    margin-top: 16px;
  }

  &__text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    transform: translate(-50%, -70%);

    span {
      padding: 0 5px;
      font-size: 32px;
      font-weight: 700;
    }
  }
}
</style>
